<template>
	<view>
		<view class="top-box">
			<image class="top-bg" ></image>
			<!-- <image class="top-bg" src="https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/vip-top-bg.png"></image> -->
			<view class="top-text-box">
				<view>
					<image style="width: 120rpx;height: 120rpx;border-radius: 50%;" :src="userinfo.headimg"></image>
				</view>
				<view style="padding-left: 20rpx;">
					<view style="display: flex;align-items: center;">
						<view  style="font-size: 32rpx;font-weight: 600;color: #A0471A;">{{store_name}}</view>
						<!-- <view v-else style="font-size: 36rpx;font-weight: 600;color: #A0471A;">{{store_name}}</view> -->
						<view v-if="vipinfo.name" style="font-size: 28rpx;font-weight: 550;color: #A0471A;padding-left: 30rpx;">{{vipinfo.name}}会员</view>
					</view>
					<view style="padding-top: 10rpx;color:  #A0471A;font-size: 26rpx;" v-if="vipinfo.name">
						{{vipinfo.end_text}}到期,续费有效期将顺延
					</view>
					<view style="padding-top: 10rpx;color:  #A0471A;font-size: 26rpx;" v-else>
						还未开通会员
					</view>

				</view>
			</view>
		</view>

		<view class="cont-box">
			<view v-if="check == 1" style="font-size: 36rpx;color: #323232;font-weight: 600;">选择会员套餐</view>
			<view v-else style="font-size: 36rpx;color: #323232;font-weight: 600;">请先登录</view>
		</view>

		<view style="padding-left: 30rpx;">
			<scroll-view scroll-x>
				<view style="display: flex;align-items: center;">
					<view class="vip-list" v-for="(it,i) in vipArr" :key="i" @click="buy(it)">
						<image class="vip-bg" :style="{color: vipColor[it.id-1].color}" :src="base_domian + it.img"></image>
						<view class="vip-text-box">
							<view style="padding-top: 20rpx;padding-left: 34rpx;color: white;">
								{{it.name}} | <text @click.stop="quanyi(i)" style="padding-left: 10rpx;">查看会员权益</text>
							</view>
							<view style="display: flex;padding-left: 30rpx;padding-right: 30rpx;justify-content: space-between;align-items: center;margin-top: 20rpx;">
								
								<view style="color: white;">
									<view style="font-size: 30rpx;font-weight: 600;">￥<text style="font-size: 44rpx;">{{it.money}}</text> </view>
									<view style="font-size: 20rpx;color: white;width: 150px;">{{it.describe}}</view>
								</view>
								<view class="vip-but" v-if="it.id == 4" style="color: #B58262">{{mycard.indexOf(it.id) != -1 ? '继续续费' : '立即开通'}}</view>
								<view class="vip-but" v-else-if="it.id == 3" style="color: #1C0000">{{mycard.indexOf(it.id) != -1 ? '继续续费' : '立即开通'}}</view>
								<view class="vip-but" v-else-if="it.id == 2 || it.id == 1" style="color: #F24B00">{{mycard.indexOf(it.id) != -1 ? '继续续费' : '立即开通'}}</view>
								<view class="vip-but" v-else style="color: #F24B00">{{mycard.indexOf(it.id) != -1 ? '继续续费' : '立即开通'}}</view>
							</view>
							
							<view class="vip-tips" v-if="mycard.indexOf(it.id) != -1" :style="{color: vipColor[it.id-1].color}">
								<view ><text v-if="mycard.indexOf(it.id) != -1">{{cardinfo[it.id].end}}到期</text></view>
								<!-- <view >剩余次数{{cardinfo[it.id].frequence}}<text v-if="mycard.indexOf(it.id) != -1">，{{cardinfo[it.id].end}}到期</text></view> -->
							</view>
							<view class="vip-tips" v-else :style="{color: vipColor[it.id-1].color}">暂未开通会员</view>
						</view>
						
					</view>
				</view>
			</scroll-view>
		</view>

		<view style="padding: 20rpx 30rpx 20rpx 30rpx;">
			<view style="font-weight: 600;font-size: 36rpx;font-weight: 600;color: #323232;">使用须知</view>
			<view style="padding-top: 20rpx;font-size: 30rpx;color: #53524B;">
				本卡仅限于洗衣用途，不能用于其它
			</view>
		</view>
		
		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="pop-box">
				<view class="pop-btn"></view>
				<image class="pop-img"  mode=""></image>
				<!-- <image class="pop-img" src="https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/vip_rule.png" mode=""></image> -->
				<view class="pop-cont">
					<scroll-view scroll-y="true">
						<view class="pop-qy">
							<view class="qy-dot"></view>
							<p v-html="vipArr[data_key].content"></p>
							<!-- <p v-html="pop_data"></p> -->
							<!-- <view class="qy-text">{{it.content}}</view> -->
						</view>
					</scroll-view>
				</view>
				<view class="close-box">
					<image @click="close" class="close-img" src="../../static/del_icon.png" mode=""></image>
				</view>
			</view>
		</uni-popup>

		<u-popup v-model="information" mode="center">
			<view class="">
				<u-field
					v-model="username"
					label="姓名"
					placeholder="请填写你的姓名"
				>
				</u-field>
				<u-field
					v-model="grade"
					label="年级"
					placeholder="请填写你的年级/系部"
				>
				</u-field>
				
				<u-field
					v-model="classname"
					label="班级"
					placeholder="请填写你的班级"
				>
				</u-field>

				<u-field
					v-model="dorm"
					label="宿舍"
					placeholder="请填写你的宿舍地址"
				>
				</u-field>
			</view>

			<u-button type="success" @click="classnamesub">确实提交</u-button>
		</u-popup>

		<!-- <button @click="zkan">置空按钮</button> -->

	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import vue from 'vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				vipinfo:[],
				show:true,
				imgUrl : 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/',
				vipColor: [
					{
						imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/yuekabg.png',
						color: '#FF9344'
					},
					{
						imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/yuekabg.png',
						color: '#FF9344'
					},
					{
						imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/studykabg.png',
						color: '#1C0000'
					},
					{
						imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/year_card.png',
						color: '#B58262'
					}
				],
				vipArr: [],
				qyList: [
					// {text: '月卡150元 | 季卡：450元 | 年卡：1800元'},
					// {text: '春夏季日洗2件衣服，床品一周一套（不包 含内衣裤等）秋冬季日洗3件衣服'},
					// {text: '本卡仅限于洗衣用途，不能用于其它'},
					// {text: '本卡购买后不可退换'}
				],
				userinfo: '',
				store_id: '',
				base_domian : this.baseDomian,
				pop_data : '',
				data_key : 2,
				check:0,
				mycard:[],
				cardinfo:{},
				store_name:'',
				business:{},
				newarr:{},
				information:false,
				grade:'',
				classname:'',
				username:'',
				dorm:''
			}
		},
		onLoad() {
			this.classnameinfo()
			this.business=uni.getStorageSync('UserInfo');
			console.log(this.business,'打印用户信息');
			var storedata = uni.getStorageSync('store_id')
			this.store_id = storedata
			let loginstatus = uni.getStorageSync('token');
			if(loginstatus)
			{
				this.check = 1
				this.getVipQuanyi()
			}
			
			
		},
		onShow() {
			this.classnameinfo()
			this.store_name = uni.getStorageSync('store_name')
			if(!this.store_id){
				uni.showModal({
					title:'请先绑定店铺信息',
					content:'请前往首页选择店铺后，再购买会员卡',
					success:function(res)
					{
						if(res.confirm)
						{
							uni.navigateTo({
								url:'/pages/index/index'
							})
						}
					}
				})
			}
			if(this.check)
			{
				this.getUserInfo()
				this.getTaocan()
				this.myvip()
				
			}
		},
		methods:{
			zkan(){
				this.$ajaxRequest.get(this.baseUrl + 'shop/order/demo', {
					
				}, true).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data,'打印new数据');
						
						
						// console.log(66666);
					}
				})
			},

			//lyr
			//会员卡信息
			myvip()
			{
				let that = this
				this.$ajaxRequest.get(this.baseUrl + 'user/vip',{
					store_id:that.store_id
				},false)
				.then(res=>{
					console.log(res.data.data,'vipinfo');
					this.vipinfo = res.data.data;
				})
			},

			//lyr
			//会员卡持有
			checkcard()
			{
				let that = this
				this.$ajaxRequest.get(this.baseUrl + 'user/check',{},true)
					.then(res=>{
						console.log('666',res.data);
						if(res.data.code == 200)
						{
							self = that
							res.data.data.map((item)=>{
								that.mycard.push(item.cid)
								vue.set(that.cardinfo,item.cid,{'end':item.end_text,'frequence':item.frequence})
							})
							console.log('own',that.cardinfo);
						}
					})
				
			},
			// 		
			getUserInfo() {
				this.$ajaxRequest.get(this.baseUrl + 'user/info', {
					store_id: this.store_id
				}, true).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.userinfo = res.data.data
					} else {
						uni.showToast({
							title:res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 会员套餐列表
			getTaocan() {
				let that = this
				let arr = []
			 	this.$ajaxRequest.get(this.baseUrl + 'shop/recharge/card', {
					store_id: this.store_id
				}, true).then(res => {
					if (res.data.code == 200) {
						this.vipArr = res.data.data
						that.checkcard()
					} else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
			// 会员权益
			getVipQuanyi() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/explain/info', {}, false).then(res => {
					if (res.data.code == 200) {
						this.qyList = res.data.data
					} else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
			quanyi(data_key){
				this.data_key = data_key;
				this.$refs.popup.open()
			},
			buy(it) {
				if(!this.store_id)
				{
					console.log('999',this.store_id);
					uni.showModal({
						title:'请先绑定店铺信息',
						content:'请前往首页选择店铺后，再购买会员卡',
						success:function(res)
						{
							if(res.confirm)
							{
								uni.navigateTo({
									url:'/pages/index/index'
								})
							}
						}
					})
				}else{
					// this.classnameinfo()
					if(this.newarr.classname==null || this.newarr.grade==null || this.newarr.dorm==null){
							this.information=true
							return
						}
						uni.navigateTo({
							url:'/pages/vip/vipDetail/index?id=' + it.id
						})
						
				}
			},
			close() {
				this.$refs.popup.close()
			},
			classnamesub(){
				if(this.grade==''){
					uni.showToast({
						title: '年级信息必须填写',
						icon: 'none'
					})
					return
				}

				if(this.classname==''){
					uni.showToast({
						title: '班级信息必须填写',
						icon: 'none'
					})
					return
				}

				if(this.username==''){
					uni.showToast({
						title: '姓名必须填写',
						icon: 'none'
					})
					return
				}

				if(this.dorm==''){
					uni.showToast({
						title: '宿舍号必须填写',
						icon: 'none'
					})
					return
				}

				this.$ajaxRequest.get(this.baseUrl + 'shop/order/classnamesub', {
					grade:this.grade,
					classname:this.classname,
					username:this.username,
					dorm:this.dorm,
					id:this.business.id
				}, true).then(res => {
					if (res.data.code == 200) {
						this.information=false
						this.classnameinfo()
						uni.showToast({
							title: '提交成功',
							icon: 'none',
							
						})
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
						})
					}
				})
			},
			classnameinfo(){
				this.$ajaxRequest.get(this.baseUrl + 'shop/order/new', {
					id:this.business.id
				}, true).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data,'打印new数据');
						this.newarr=res.data.data
						
						console.log(this.newarr,'打引new数组');
					}
				})
			}
		}
		
	}
</script>

<style>
	.pop-btn{
		width: 30px;
		height: 30px;
		border-radius: 50%;
		line-height: 30px;
		position: absolute;
		background-image:image("../../static/del_icon.png");
		right: 10px;
		top: 10px;

	}

	.vip-tips {
		position: absolute; 
		bottom: 25rpx; 
		display: flex;
		align-items: center;
		padding-top: 50rpx;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
		font-size: 20rpx;
	}
	.pop-box {
		position: relative;
	}
	
	.pop-img {
		width: 640rpx;
		height: 737rpx;
		background-color: antiquewhite;
		/* height: 588rpx; */
	}
	.close-box {
		display: flex;
		justify-content: center;
		padding-top: 46rpx;
	}
	.close-img {
		width: 60rpx;
		height: 60rpx;
	}
	.pop-cont {
		position: absolute;
		top: 100rpx;
		left: 0;
		width: 100%;
		padding-left: 30rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
	}
	.pop-qy {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid #FBF8F9;
	}
	.qy-dot {
		top: 20rpx;
		width:8rpx;
		height:8rpx;
		background:rgba(255,128,62,1);
		border-radius:50%;
		margin-right: 25rpx;
		transform: translateY(15rpx);
	}
	.qy-text {
		width: 556rpx;
		/* font-size: 30rpx; */
		color: #575757;
	}
	/* .pop-box{
		padding-top: 30rpx;
		position: relative;
		width: 640rpx;
		height: 588rpx;
	} */
	.vip-but {
		width: 160rpx;
		height: 60rpx;
		background: linear-gradient(90deg, rgba(245, 213, 153, 1) 0%, rgba(253, 209, 125, 1) 100%);
		border-radius: 30rpx;
		color: #F24A00;
		/* padding: 5rpx 20rpx 5rpx 20rpx; */
		text-align: center;
		line-height: 60rpx;
		font-size: 26rpx;
		font-weight: 700;
	}

	.vip-text-box {
		position: relative;
		width: 500rpx;
		height: 268rpx;
	}

	.vip-list {
		position: relative;
		margin-right: 20rpx;
		width: 500rpx;
		height: 268rpx;
	}

	.vip-bg {
		position: absolute;
		width: 500rpx;
		height: 268rpx;
	}

	.cont-box {
		padding: 20rpx 30rpx 20rpx 30rpx;
	}

	.top-box {
		position: relative;
		width: 750rpx;
		height: 322rpx;
	}

	.top-bg {
		position: absolute;
		width: 750rpx;
		height: 322rpx;
		background-color: antiquewhite;
	}

	.top-text-box {
		display: flex;
		align-items: center;
		padding-top: 140rpx;
		padding-left: 58rpx;
		position: relative;
		z-index: 10;
	}
</style>
